<template>
  <div style="background: #fff; padding: 10px 20px; box-sizing: border-box">
    <a-row :gutter="[16,16]">
      <a-col :span="6">
        <div class="sbzs devices">
          <div class="devices-left">
            <img src="../../../assets/icon/icon-5.png"/>
          </div>
          <div class="devices-right">
            <p>设备总数</p>
            <h1>{{ total }}</h1>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="zcsb devices">
          <div class="devices-left">
            <img src="../../../assets/icon/icon-6.png"/>
          </div>
          <div class="devices-right">
            <p>正常设备</p>
            <h1>{{ normal }}</h1>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="bjsb devices">
          <div class="devices-left">
            <img src="../../../assets/icon/icon-7.png"/>
          </div>
          <div class="devices-right">
            <p>报警设备</p>
            <h1>0</h1>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="lxsb devices">
          <div class="devices-left">
            <img src="../../../assets/icon/icon-8.png"/>
          </div>
          <div class="devices-right">
            <p>离线设备</p>
            <h1>{{ offLine }}</h1>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" style="margin-bottom: 20px;">
        <a-select show-search
                  allowClear
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  style="width: 200px;margin-right: 20px;"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  @change="handleChange" placeholder="设备名称">
          <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.deviceName }}
          </a-select-option>
        </a-select>
        <a-button type="primary" @click="queryBtn" style="background: #3C67F1;border: none;">查询</a-button>
      </a-col>
      <a-col :span="12" style="margin-bottom: 15px;">
      </a-col>
      <a-col :span="12" style="text-align: right;margin-bottom: 15px;">
        <a-button icon="export" style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" @click="exportXlsBtn('设备统计')" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-table :loading="loading" :pagination="false" :rowClassName="getRowClassName" :columns="columns" rowKey='code'
                 :data-source="data" bordered>
          <span slot="deviceStatus" slot-scope="text">{{ text == 'ONLINE' ? '在线' : '离线' }}</span>
        </a-table>
        <div style="text-align: right;margin-top: 30px">
          <a-pagination v-model="pageNo" :page-size="pageSize" :total="total"
                        @change="onShowSizeChange"/>
        </div>
      </a-col>
      <a-col :span="24">
        <div
          style="width: 140px;height: 50px;display: flex; margin: 20px auto;align-items: center;justify-content: space-between;font-size: 20px;font-weight: bolder;">
          <img src="../../../assets/icon/bg.png"/>月数据分析
        </div>
      </a-col>
      <a-col :span="24">
        <div style="width: 100%;height: 30vh" id="analysis"></div>
      </a-col>
<!--      <NewEquipment ref="NewEquipment"></NewEquipment>-->
    </a-row>
  </div>
</template>

<script>
import {list, query, queryStatusCount, queryTypeCount} from '@/api/device'
import {exportXls} from '@/api/meteorological'
import NewEquipment from './NewEquipment'
import getAll from "@views/wfinfo/management/getAll";
// 引入混入封装方法
import getAlls from './getAll'

const columns = [
  {
    title: '设备ID',
    dataIndex: 'code',
    key: 'name'
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    ellipsis: true
  },
  {
    title: '设备密钥',
    dataIndex: 'deviceSecret',
    ellipsis: true
  },
  {
    title: '在线状态',
    dataIndex: 'deviceStatus',
    scopedSlots: {customRender: 'deviceStatus'},
    ellipsis: true
  },
  {
    title: '设备创建时间',
    dataIndex: 'createDate',
    ellipsis: true
  }
]

export default {
  mixins: [getAlls],
  data() {
    return {
      data: [],
      columns,
      loading: true,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      normal: 0,
      offLine: 0,
      deviceName: '',
      status: 'ONLINE',
      list: [],
      exportUrl: '/fabr/fabrDevice/exportXls'
    }
  },
  mounted() {
    this.dataList(this.deviceName == undefined ? '' : this.deviceName, this.pageNo, this.pageSize)
  },
  components: {
    NewEquipment
  },
  methods: {
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    // 下拉框值
    handleChange(val) {
      this.deviceName = val
    },
    // 分页数据
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.dataList(this.deviceName == undefined ? '' : this.deviceName, this.pageNo, this.pageSize)
    },
    // 表格颜色
    getRowClassName(record, index) {
      let className = 'light-row';
      if (index % 2 === 1) className = 'dark-row';
      return className;
    },
    // 查询
    queryBtn() {
      this.dataList(this.deviceName == undefined ? '' : this.deviceName, this.pageNo, this.pageSize)
    },
    // 数据获取
    dataList(deviceName, pageNo, pageSize) {
      query().then(res => {
        this.list = res.result
      }).catch(err => {
      })
      list(deviceName, pageNo, pageSize).then(res => {
        this.data = res.result.records
        this.total = res.result.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
      // 设备统计总数
      queryStatusCount().then(res => {
        this.total = res.result.allCount
        this.normal = res.result.onCount
        this.offLine = res.result.offCount
        // 设备统计柱状图
        queryTypeCount().then(res => {
          let xData = res.result.map(item => item.kindName)
          let data = res.result.map(item => item.sort)
          this.analysis(data, xData)
        }).catch(err => {
        })
      }).catch(err => {
      })
    },
    // 调用子组件
    equipment() {
      this.$refs.NewEquipment.modal2Visible = true
    },
    // 折线图
    analysis(data, xData) {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('analysis') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)

      myChart.setOption({
        grid: {
          left: '2%',
          bottom: '15%',
          top: '20%',
          right: '2%'
        },
        // color: ['#298DFF', ' #33CA66','yellow'],
        barWidth: 14,
        title: {
          // text: '世界人口总量',
          // subtext: '数据来自网络'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          // left: '0%',
          top: '10',
          x: 'center', //可设定图例在左、右、居中
          textStyle: {
            //图例文字的样式
            color: '#8C8C8C',
            fontSize: 12
          },
          data: ['数量']
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false // 去除网格线
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#BFBFBF', // 坐标线的颜色
              width: '1'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#595959' //坐标值的颜色
            },
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length //总字数
              var provideNumber = 5 //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          },
          boundaryGap: [0, 0.01],
          data: xData
          //   [
          //   '电磁阀',
          //   '气象站',
          //   '墒情设备',
          //   '摄像头',
          //   'RTU',
          //   '叠片过滤器',
          //   '砂石过滤器',
          //   '增压泵',
          //   '压力针',
          //   '网关',
          //   '液位针',
          //   '蓄电池',
          //   '控制器'
          // ]
        },
        yAxis: {
          type: 'value',
          splitLine: {
            // show: false // 去除网格线
            lineStyle: {
              color: '#E8E8E8',
              type: 'dashed' //设置间隔线为虚线
            }
          },
          axisTick: {
            show: false //小横线
          },
          splitArea: {
            // show: true // 保留网格区域
          },
          axisLine: {
            show: false, // 去除纵向边框线
            lineStyle: {
              type: 'solid',
              color: '#BFBFBF', // 坐标线的颜色
              width: '1'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#595959' //坐标值的颜色
            }
          }
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            label: {
              show: false,
              position: 'center', // 位置
              color: '#298DFF',
              fontSize: 12,
              fontWeight: 'normal', // 加粗
              distance: 5, // 距离
              offset: [0, 1] // 偏移距离[横向，纵向]
            }, // 柱子上方的数值
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#248ff7'
                  },
                  {
                    offset: 1,
                    color: '#6851f1'
                  }
                ]),
                barBorderRadius: 12
              }
            },
            data: data
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.devices {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  margin: 20px 0;
  box-shadow: 0px 0px 10px 0px rgba(42, 104, 219, 0.1);
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}

.sbzs {
  background: linear-gradient(90deg, #76BFF9, #2897EF);
}

.zcsb {
  background: linear-gradient(-90deg, #FC879B, #FFBF96);
}

.bjsb {
  background: linear-gradient(90deg, #83D9D2, #2FD1BA);
}

.lxsb {
  background: linear-gradient(90deg, #A59CFD, #7669F2);
}

.devices-right h1 {
  color: #fff;
  font-size: 28px;
  margin: 0;
}

.devices-right p {
  margin: 0;
}

/deep/ .dark-row {
  background: #F5F7FA;
}
</style>